<!--
 * @Author: PoJun
 * @Date: 2024-06-25 11:23:36
 * @LastEditors: PoJun
 * @LastEditTime: 2024-07-05 16:28:21
 * @Message: 1.上下拉 2. 回到顶部
-->
<template>
  <!-- eslint-disable vue/valid-template-root -->
  <page-meta :page-style="'overflow:' + (loading ? 'hidden' : 'visible')"></page-meta>
  <!-- 上述代码在h5可能会不生效, 但不关键 -->
  <!-- eslint-disable -->
  <view class="detail" :style="[vuex_theme]">
    <!-- 给骨架屏拆开只是为了在渲染页面的时候不那么突兀, 这样干又必须要去控制页面的滚动了.哎 -->
    <uv-skeletons :loading="loading" :skeleton="skeleton"></uv-skeletons>

    <!-- 内容区域 -->
    <uv-row gutter="10">
      <uv-col :span="4" v-for="(item, index) in showList" :key="index">
        <image
          :src="item.img_1024_768 || item.url"
          @click="switchImage(index)"
          :lazyLoad="true"
          class="detail-image"
          mode="aspectFill"
        ></image>
      </uv-col>
    </uv-row>

    <!-- 加载更多 -->
    <uv-load-more v-if="showList.length > 10 && !loading" :status="status" line />
    <!-- 返回顶部 -->
    <uv-back-top
      :scroll-top="scrollTop"
      :iconStyle="{ color: '#fff' }"
      :customStyle="{ backgroundColor: vuex_theme['--theme-primary-color'] }"
    ></uv-back-top>
  </view>
</template>

<script>
import { getImageListById } from "@/common/apis/image"
export default {
  data() {
    return {
      showList: [],
      dataId: "",
      pageSize: 15,
      pageNum: 0,
      status: "loadmore",
      scrollTop: 0,
      loading: true,
      skeleton: [
        {
          type: "flex",
          num: 5,
          children: [
            {
              type: "custom",
              num: 1,
              style: "width: 225rpx;height:200px;"
            },
            {
              type: "custom",
              num: 1,
              style: "width: 225rpx;height:200px;marginLeft: 10rpx;"
            },
            {
              type: "custom",
              num: 1,
              style: "width: 225rpx;height:200px;marginLeft: 10rpx;"
            }
          ]
        }
      ]
    }
  },
  onLoad(e) {
    uni.setNavigationBarTitle({ title: e.name || "" })
    this.dataId = e.id
    this.getTheDetails()
  },
  methods: {
    /**
     * 获取详细信息的方法
     */
    async getTheDetails() {
      if (this.pageNum == 0) {
        this.showList = []
      }
      this.status = "loading"
      const params = {
        count: this.pageSize,
        start: this.pageNum * this.pageSize + 1,
        cid: this.dataId
      }
      try {
        const res = await getImageListById(params)
        if (this.showList.length == res.total) {
          this.status = "nomore"
        }

        this.showList = this.showList.concat(res.data)
        this.$uv.vuex("vuex_image_list", this.showList)

        if (this.loading) {
          await uni.$uv.sleep(200)
          this.loading = false
        }
      } finally {
        uni.stopPullDownRefresh()
      }
    },
    /**
     * 进入轮播模式开启切换图片,数据用vuex存储吧.
     */
    switchImage(index) {
      uni.$uv.route({
        url: "/subpages/imageDep/swiper/swiper",
        params: {
          index
        }
      })
    }
  },
  onReachBottom() {
    if (this.status == "nomore") {
      return
    }
    this.status = "loading"
    this.pageNum = ++this.pageNum
    this.getTheDetails()
  },
  onPullDownRefresh() {
    this.pageNum = 0
    this.getTheDetails()
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  }
}
</script>

<style lang="scss" scoped>
.detail {
  padding: 0 25rpx;
  ::v-deep .uv-row {
    flex-wrap: wrap;
  }

  &-image {
    overflow: hidden;
    margin-bottom: 20rpx;
    height: 200px;
    width: 100%;
  }
}
</style>
